const path = require('path');
// 打包后自动生成html文件并引入包好的js文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 打包前清除输出目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',

  /*
    开发环境 cheap-module-eval-source-map 速度+提示效果好
    线上环境调试问题：cheap-module-source-map
  */
  devtool: 'source-map',
  entry: {
    main: './src/index.js'
  },

  output: {
    // publicPath: 'https://cdn.com/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  // loader配置，处理不同资源
  module: {
    rules: [
      {
        test: /\.(txt|eot|woff2|woff|ttf|svg)/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'file/'
          }
        }
      },

      // 处理图片静态资源
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/',
            limit: 8200
          }
        }
      },

      // 处理css静态资源
      {
        test: /\.css$/,
        use:  ['style-loader','css-loader','postcss-loader']
      },

      // 处理scss静态资源
      {
        test: /\.(scss)$/,
        use:  [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2, // scss里import的scss文件也要走下面二个个loader
              modules: true // 开启css的模块化打包
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  },

  // 在构建的某一时间点执行一些操作
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],

  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    open: true, // 自动打开浏览器
    // 接口代码，跨域请求
    // proxy: {
    //   '/api': 'https://test.com'
    // }
  }
}